<template>
  <div class="page">
    <el-form ref="form" :model="form">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>辅导教师表</span>
      </div>
      <div>
        <p class="p_title margin">申报者须请了解其科研活动情况及个性特点的辅导教师填写此表格（建议使用电脑填写并打印），并在指定位置签名确认。如需附页，置于本表后，附页上亦须手写签名。</p>
        <p class="p_title margin">辅导教师填写前须认真审阅学生填写的《研究项目》和《个人陈述》。本表首页须加盖辅导教师所在单位公章。</p>
        <p class="p_title margin">申报者将填写完整的表格扫描上传至申报系统，完成提交。同时在申报系统中按顺序添加所有辅导教师的相关信息，并保证与此表上的信息一致。自制申报表无效，不接受以电子邮件或传真方式提交的申报表。</p>
      </div>
      <div class="table">
        <h2>第十八届“明天小小科学家”奖励活动</h2>
        <h4>申报表四：辅导教师表（必填）</h4>
        <div class="table_grounp">
          <h4>1.您认识该学生多久了？了解该学生哪方面的能力？与您教学工作中的其他学生相比有什么特点？(500以内)</h4>
          <el-form-item :required="required" :show-message="false" prop='know'>
                <el-input 
                type="textarea"
                :maxlength="500"
                :autosize="{ minRows: 10, maxRows: 20}"
                v-model="form.know"/>
                <span class="lenght">{{know}}/500</span>
              </el-form-item>
           
        </div>
        <div class="table_grounp">
          <h4>2.该学生在学习中表现出哪些突出才能和特点，请举例说明。(500以内)</h4>
          <el-form-item :required="required" :show-message="false" prop='comment'>
                <el-input 
                type="textarea"
                :maxlength="500"
                :autosize="{ minRows: 10, maxRows: 20}"
                v-model="form.comment"/>
                <span class="lenght">{{comment}}/500</span>
              </el-form-item>
        </div>
        
        <h4 style="font-size:16px;">
          我确认上述内容属实。
        </h4>
        <div class="form">
          <div class="form_box tutbox">
            <div>
              <span>辅导教师姓名：</span>
              <el-form-item :required="required" :show-message="false" prop='tutorName'>
                <el-input v-model="form.tutorName" type="text" class="width50" ></el-input>
              </el-form-item>
              <span>学位：</span>
              <el-form-item :required="required" :show-message="false" prop='education'>
                <el-input v-model="form.education" type="text" class="width50" ></el-input>
              </el-form-item>
              <span>学历：</span>
              <el-form-item :required="required" :show-message="false" prop='degree'>
                <el-input v-model="form.degree" type="text" class="width50" ></el-input>
              </el-form-item>
              <span>专业：</span>
              <el-form-item :required="required" :show-message="false" prop='professional'>
                <el-input v-model="form.professional" type="text" class="width50" ></el-input>
              </el-form-item>
              <span>职称：</span>
              <el-form-item :required="required" :show-message="false" prop='title'>
                <el-input v-model="form.title" type="text" class="width50" ></el-input>
              </el-form-item>
            </div>
            <div>
              <span>工作单位：</span>
              <el-form-item :required="required" :show-message="false" prop='workUnit'>
                <el-input v-model="form.workUnit" type="text" style="width:200px;" ></el-input>
              </el-form-item>
              <span>通讯地址：</span>
              <el-form-item :required="required" :show-message="false" prop='address'>
                <el-input v-model="form.address" type="text" style="width:200px;" ></el-input>
              </el-form-item>
              
            </div>
            <div>
              <span>电子邮箱：</span>
              <el-form-item :required="required" :show-message="false" prop='email'>
                <el-input v-model="form.email" type="text" class="width70" ></el-input>
              </el-form-item>
              <span>移动电话：</span>
              <el-form-item :required="required" :show-message="false" prop='mobile'>
                <el-input v-model="form.mobile" type="text" class="width70" ></el-input>
              </el-form-item>
              <span>工作电话：</span>
              <el-form-item :required="required" :show-message="false" prop='officephone'>
                <el-input v-model="form.officephone" type="text" class="width70" ></el-input>
              </el-form-item>
            </div>
            <div>
              <span>辅导教师签名（手写）：</span><input disabled type="text" class="width20">
              <span>日期（手写）：</span><input disabled type="text" class="width20">
              <span>年</span><input disabled type="text" class="width20">
              <span>月</span><input disabled type="text" class="width20">
              <span>日</span>
              
              
            </div>
            <div>
              <span>单位（盖章）</span><input disabled type="text" class="width20">
            </div>
           
          </div>
          
        </div>
        <div style="text-align:center; margin:20px 0;">
          <el-button @click="pevs" type="primary" size="mini">上一步</el-button>
          <el-button @click="save" type="primary" size="mini">保存</el-button>
          <el-button @click="nexts" type="primary" size="mini">下一步</el-button>
          <div style="font-size:14px; margin-top:20px;">
            <small>请先保存再进行下一步操作</small>
          </div>
        </div>
      </div>
    </el-card>
    </el-form>
  </div>
</template>

<script type="text/ecmascript-6">
import { pev, next } from '@/function/pevNext/pevNext.js'
import { tutor } from '@/function/formTable/formTable.js'
import { get_tutor } from '@/function/formTable/getFormTable.js'
export default {
  mounted () {
    get_tutor(this)
  },
  computed: {
    know() {
      return this.form.know !== '' ? this.form.know.length : 0
    },
    comment() {
      return this.form.comment !== '' ? this.form.comment.length : 0
    }
  },
  data() {
    return {
      required: true,
      form: {
        know: '',
        comment: '',
        tutorName: '',
        education: '',
        degree: '',
        professional: '',
        title: '',
        workUnit: '',
        address: '',
        email: '',
        mobile: '',
        officephone: ''
      }
    }
  },
  methods: {
    pevs() {
      pev(this)
    },
    nexts() {
      next(this)
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let data = this.form;
          tutor(this.form, this)
        } else {
          alert("请填写完整信息！");
          return false;
        }
      });
    },
  }
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
